/* 
  钟表：canvas画布项目实战
*/

interface Hms{
  H:number;
  h:number;
  m:number;
  s:number;
}

class Watch{
  padding:number = 10;//画布的留白
  radius:number;//表盘半径

  // 取得当前画布
  watchPlate:HTMLCanvasElement;
  // 画布上下文 
  ctx:CanvasRenderingContext2D;

  // 表针画布
  handCtx:CanvasRenderingContext2D;

  // 画布中心
  center:{x:number, y:number;}

  constructor(watchCanvasSlt:string){

    this.watchPlate =  document.querySelector(watchCanvasSlt) as HTMLCanvasElement;

    // let watchBox = this.watchPlate.parentNode as HTMLElement;
    this.handCtx = this.resetCanvas(this.watchPlate.parentNode as HTMLElement);

    this.ctx = this.watchPlate.getContext("2d") as CanvasRenderingContext2D;

    this.center = {x:this.watchPlate.clientWidth/2, y:this.watchPlate.clientHeight/2};

    this.radius = this.center.x - this.padding;//表盘半径

    // 初始化画布基础色彩
    this.ctx.fillStyle = "#27487f";
    this.ctx.strokeStyle = "#27487f";
    this.ctx.save();//保存画布初始状态

  }

  // 重设置画布
  private resetCanvas(canvasParent:HTMLElement): CanvasRenderingContext2D{
    //1. 重设表盘画布尺寸
    this.watchPlate.width = canvasParent.clientWidth;
    this.watchPlate.height = canvasParent.clientHeight;

    // 2. 生成表针画布
    let watchHandCav = document.createElement("canvas");
    watchHandCav.width = canvasParent.clientWidth;
    watchHandCav.height = canvasParent.clientHeight;
    watchHandCav.style.zIndex = "100";
    canvasParent.append(watchHandCav);

    return watchHandCav.getContext("2d") as CanvasRenderingContext2D;
  }

  public create(){
    this.createDialPlate();

    setInterval(()=>{
      let hms = this.getNowHms();
      this.createHand(hms);
      this.setLedWatch(".ledWatch", hms);
    }, 1000);
  }


  private getNowHms():Hms{
    // 计算时间
    let dt = new Date();
    let hms = {
      H:dt.getHours(),
      h:dt.getHours()%12,
      m:dt.getMinutes(),
      s:dt.getSeconds(),
    }

    

    return hms;
  }

  // 设置并生成指针
  private createHand(hms:Hms){
    let ctx = this.handCtx;

    ctx.clearRect(0,0, 500,500);

    // 时针
    ctx.save();
    ctx.translate(this.center.x, this.center.y);
    ctx.rotate((hms.h+hms.m/60)*30*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, -(this.radius-150));
    ctx.lineTo(0, 20);
    ctx.lineWidth = 10;//表盘圆线宽
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

    // 分针
    ctx.save();
    ctx.translate(this.center.x, this.center.y);
    ctx.rotate(hms.m*6*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, -(this.radius-110));
    ctx.lineTo(0, 20);
    ctx.lineWidth = 6;//表盘圆线宽
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

    // 秒针
    ctx.save();
    ctx.translate(this.center.x, this.center.y);
    ctx.rotate(hms.s*6*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, -(this.radius-70));
    ctx.lineTo(0, 20);
    ctx.strokeStyle = "red"
    ctx.lineWidth = 3;//表盘圆线宽
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

  }

  // 设置：电子表
  private setLedWatch(ledWatchSlt:string, hms:Hms){
    let canvas =  document.querySelector(ledWatchSlt) as HTMLCanvasElement;
    let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

    ctx.clearRect(0,0,canvas.clientWidth, canvas.clientHeight);
    // ctx.beginPath();
    ctx.font = "30px 黑体";
    ctx.fillStyle ="#FFF"
    ctx.textAlign ="center";
    ctx.textBaseline = "middle";
    ctx.fillText(hms.H+":"+hms.m+":"+hms.s, canvas.clientWidth/2, canvas.clientHeight/2);
  }

  // 设置表盘:盘+刻度+数字
  private createDialPlate(){

    let ctx = this.ctx;

    // 画表盘
    ctx.save();
    ctx.beginPath();
    ctx.arc(this.center.x, this.center.y, this.radius, 0 , Math.PI*2);
    ctx.lineWidth = 5;//表盘圆线宽
    ctx.stroke();
    ctx.fillStyle = "#f5f5f5";//表盘背景色
    ctx.fill();
    ctx.closePath();
    ctx.restore();

    // 画表中心
    ctx.save();
    ctx.beginPath();
    ctx.arc(this.center.x, this.center.y, 10, 0 , Math.PI*2);
    // ctx.fillStyle = "#000";//颜色
    ctx.fill();
    ctx.closePath();
    ctx.restore();

    // 画刻度
    ctx.save();
    ctx.translate(this.center.x, this.center.y);//二次圆坐标中心，旋转中心
    for(let i=1; i<=60; i++){//60个刻度，每个6度
      // 画一个刻度，每个刻度旋转6度
      ctx.beginPath();
      ctx.rotate(6*Math.PI/180);
      ctx.moveTo(0, -this.radius);//刻度线起始位置

      if(i%5===0){
        ctx.lineWidth = 5;//线宽
        ctx.lineTo(0, -(this.radius-15));//刻长   
      }
      else {
        ctx.lineWidth = 2;//线宽
        ctx.lineTo(0, -(this.radius-10));//刻长   
      }

      ctx.stroke();
      ctx.closePath();
    }
    ctx.restore();

    // 写刻度数值
    ctx.save();
    ctx.translate(this.center.x, this.center.y);
    for(let i=1; i<=12; i++){//12个数，每个30度
      // 画一个刻度，每个刻度旋转6度
      ctx.beginPath();
      ctx.rotate(30*Math.PI/180);
      // ctx.fillStyle = "#000";//不定义使用默认
      ctx.font = "20px 黑体";
      ctx.textAlign = "center";
      ctx.textBaseline = "top";
      ctx.fillText(String(i), 0, -(this.radius-20));
      ctx.closePath();
    }
    ctx.restore();
  }


}

(new Watch(".watchPlate")).create();
